<template>
  <div>
    <div class="pager">
      <div class="block">
        <el-pagination
          @current-change="changindex"
          background
          layout="prev, pager, next,total"
          :total="userList.length"
          :currentPage="currentPage"
          :page-size="pageSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../../store/bus";
export default {
  // props: ['user'],
  data() {
    return {
      // 数据源
      userList: [],
      // 总页数
      // PageCount: 1000,
      //每页展示的数据条数
      pageSize: 10,
      // 当前页码
      currentPage: 1
    };
  },
  //计算属性
  computed: {},
  //监听
  watch: {
    // 监听列表是否发生变化
    userList() {
      bus.$emit("userlist", this.RenderData(this.userList));
    },
    currentPage() {
      bus.$emit("userlist", this.RenderData(this.userList));
    }
  },
  //方法
  methods: {
    //渲染当前页面的数据
    RenderData(value) {
      let CurrentData = [];
      CurrentData = value.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
      return CurrentData;
    },
    // 换页
    changindex(index) {
      // console.log(index);
      this.currentPage = index;
    }
  },
  //组件
  components: {},
  // 生命周期
  mounted() {},
  created() {
    // 传送用户页面需要渲染的值
    bus.$emit("userlist", this.RenderData(this.userList));
    // 接受用户页面的值
    bus.$on("changdata", val => {
      this.userList = val;
    });
    // 接受商品页面的值
    bus.$on("commditylist", val => {
      // console.log("5436", val);
      this.userList = val;
    });
  }
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin: 5px auto;
  text-align: center;
  background-color: #ffffff;
  height: 15vh;
  outline: 1px solid #ebeef5;
}
</style>